<style>.table-tab{margin-top: 0;}</style>
<div class="screen layui-collapse" lay-filter="selection_panel">
	<div class="layui-colla-item">
		<form class="layui-colla-content layui-form layui-show">
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">商品名称：</label>
					<div class="layui-input-inline">
						<input type="text" name="search_text" autocomplete="off" class="layui-input" placeholder="输入商品名称" />
					</div>
				</div>
				
				<div class="layui-inline">
					<label class="layui-form-label">商品类型：</label>
					<div class="layui-input-inline">
						<select name="goods_class" lay-filter="goods_class">
							<option value="">全部</option>
							<option value="1">实物商品</option>
							<option value="2">虚拟商品</option>
						</select>
					</div>
				</div>
				
				<div class="layui-inline">
					<label class="layui-form-label">是否参与：</label>
					<div class="layui-input-inline">
						<select name="is_lian" lay-filter="is_lian">
							<option value="">全部</option>
							<option value="1">已参与</option>
							<option value="0">未参与</option>
						</select>
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">商品分类：</label>
					<div class="layui-input-inline">
						{include file="goods/category_select" /}
					</div>
				</div>
			</div>
			
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">销量：</label>
					<div class="layui-input-inline">
						<input type="number" name="start_sale" id="start_sale" lay-verify="int" placeholder="最低销量" class="layui-input" autocomplete="off">
					</div>
					<div class="layui-form-mid">-</div>
					<div class="layui-input-inline">
						<input type="number" name="end_sale" id="end_sale" lay-verify="int" placeholder="最高销量" class="layui-input" autocomplete="off">
					</div>
				</div>
			</div>
			
			<input type="hidden" name="goods_state" />
			
			<div class="form-row">
				<button class="layui-btn" lay-submit id="" lay-filter="search">筛选</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</form>
	</div>
</div>
<div class="layui-tab table-tab" lay-filter="lian_goods_tab">
	<div class="layui-tab-content">
		<!-- 列表 -->
		<table id="lian_list" lay-filter="lian_list"></table>
	</div>
</div>

<!-- 商品 -->
<script type="text/html" id="goods_info">
	<div class="table-title">
		<div class="title-pic">
			<img layer-src src="{{ns.img(d.goods_image.split(',')[0], 'small')}}"/>
		</div>
		<div class="title-content">
			<a href="javascript:;" class="multi-line-hiding text-color-sub" title="{{d.goods_name}}">{{d.goods_name}}</a>
		</div>
	</div>
</script>

<!-- 状态 -->
<script type="text/html" id="status">
	{{# if(d.status == 0){ }}
	<span style="color: red;">待审核</span>
	{{# }else if(d.status == 1){ }}
	<span style="color: green;">审核通过</span>
	{{# }else if(d.status == 2){ }}
	<span style="color: gray;">审核拒绝</span>
	{{# }else if(d.status == -1){ }}
	<span style="color: gray;">冻结</span>
	{{# } }}
</script>

<!-- 工具栏操作 -->
<script type="text/html" id="operation">
	<div class="operation-wrap" data-goods-id="{{d.goods_id}}">
		<div class="table-btn">
			<a class="layui-btn" lay-event="detail">详情</a>
			{{# if(d.is_lian == 1){ }}
			<a class="layui-btn" lay-event="config">佣金设置</a>
			{{# }else{ }}
			{{# } }}
		</div>
	</div>
</script>

<!-- 批量操作 -->
<script type="text/html" id="toolbarOperation">
	<button class="layui-btn layui-btn-primary" lay-event="join">参与</button>
	<button class="layui-btn layui-btn-primary" lay-event="cancel">不参与</button>
</script>

<!-- 批量操作 -->
<script type="text/html" id="batchOperation">
	<button class="layui-btn layui-btn-primary" lay-event="join">参与</button>
	<button class="layui-btn layui-btn-primary" lay-event="cancel">不参与</button>
</script>

<script>
	var form, element, repeat_flag, table;
	layui.use(['form', 'laydate','element'], function() {
		form = layui.form, element = layui.element, laydate = layui.laydate;
		form.render();
		
		//渲染时间
		laydate.render({
			elem: '#start_time',
			type: 'datetime'
		});
		
		laydate.render({
			elem: '#end_time',
			type: 'datetime'
		});
		
		table = new Table({
			elem: '#lian_list',
			url: ns.url("lian://shop/goods/lists"),
			toolbar: '#toolbarOperation',
			bottomToolbar: "#batchOperation",
			cols: [
				[{
					type: 'checkbox',
					unresize: 'false',
					width: '3%'
				},
				{
					title: '商品名称',
					unresize: 'false',
					templet: '#goods_info',
					width: '21%'
				}, {
					field: 'price',
					title: '价格',
					unresize: 'false',
					align: 'right',
					width: '13%',
					templet: function (data) {
						return '￥' + data.goodsSku.price;
					}
				}, {
					unresize: 'false',
					width: '4%'
				}, {
					field: 'goods_stock',
					title: '库存',
					unresize: 'false',
					width: '8%'
				}, {
					field: 'sale_num',
					title: '销量',
					unresize: 'false',
					width: '8%'
				}, {
					title: '销售状态',
					unresize: 'false',
					width: '10%',
					templet: function (data) {
						var str = '';
						if (data.goods_state == 1) {
							str = '<span style="color: green">销售中</span>';
						} else if (data.goods_state == 0) {
							str = '<span style="color: red">仓库中</span>';
						}
						return str;
					}
				}, {
					title: '是否参与',
					unresize: 'false',
					width: '10%',
					templet: function (data) {
					    if(data.is_lian == 1){
                            return '<input type="checkbox" name="is_lian" data-goods-id="'+ data.goods_id + '" value="1" lay-filter="is_lian" lay-skin="switch" checked>';
                        }else{
                            return '<input type="checkbox" name="is_lian" data-goods-id="'+ data.goods_id + '" value="0" lay-filter="is_lian" lay-skin="switch">';
						}
					}
				},  {
					title: '操作',
					toolbar: '#operation',
					unresize: 'false',
					align:'right'
				}]
			]
		});
		
		/**
		 * 搜索功能
		 */
		form.on('submit(search)', function(data) {
			table.reload({
				page: {
					curr: 1
				},
				where: data.field
			});
			return false;
		});

		//按钮监控
        form.on('switch(is_lian)', function(data){
			var goods_id = $(data.elem).attr('data-goods-id');
			modifyLian(goods_id, data.elem.checked ? 1 : 0, data.elem);  // 使用checked属性获取真实状态
		});
		
		/**
		 * 监听工具栏操作
		 */
		table.tool(function(obj) {
			var data = obj.data,
				event = obj.event;
			switch (event) {
				case 'detail': //查看
					location.hash = ns.hash('lian://shop/goods/detail', {'goods_id': data.goods_id});
					break;
				case 'config':
					//编辑
					location.hash = ns.hash("lian://shop/goods/config", {"goods_id": data.goods_id});
					break;
				case 'modify':
					//删除
					modifyLian(data.goods_id, data.is_lian);
					break;
			}
		});

		// 批量操作
		table.bottomToolbar(function (obj) {
			if (obj.data.length < 1) {
				layer.msg('请选择要操作的数据');
				return;
			}
			var id_array = new Array();
			for (i in obj.data) id_array.push(obj.data[i].goods_id);
			switch (obj.event) {
				case "join":
					joinLian(id_array);
					break;
				case 'cancel':
					//下架
					cancelLian(id_array);
					break;
			}
		});
		
		// 批量操作
		table.toolbar(function (obj) {
			if (obj.data.length < 1) {
				layer.msg('请选择要操作的数据');
				return;
			}
			var id_array = new Array();
			for (i in obj.data) id_array.push(obj.data[i].goods_id);
			switch (obj.event) {
				case "join":
					joinLian(id_array);
					break;
				case 'cancel':
					//下架
					cancelLian(id_array);
					break;
			}
		});
		
	});
	
	//配置参与状态
	function modifyLian(goods_id, is_lian, data) {
	    if(is_lian == 1){
	        var lian_tip = "如果商品尚未设置佣金规则，首次开启默认按照链动等级发放佣金，是否继续开启?";
		}else{
            var lian_tip = "是否设置商品不参与链动?";
		}
		layer.confirm(lian_tip,{
            btn: ['确定', '取消'],
            cancel: function(index, layero){
                if(is_lian == 1){
                    $(data).prop("checked",true);
                }else{
                    $(data).prop("checked",false);
                }
				form.render();
                layer.close(index);
                return false;
            }
        }, function () {
			if (repeat_flag) return;
			repeat_flag = true;
			$.ajax({
				url: ns.url("lian://shop/goods/modify"),
				data: {goods_id: goods_id, is_lian:is_lian},
				dataType: 'JSON',
				type: 'POST',
				success: function (res) {
					layer.msg(res.message);
					repeat_flag = false;
					if (res.code == 0) {
						table.reload();
					}
				}
			});
		},function () {
            if(is_lian == 1){
                $(data).prop("checked",true);
                form.render();
			}else{
                $(data).prop("checked",false);
                form.render();
			}
        });
	}

	function joinLian(goods_ids){
		layer.confirm('批量参与链动的商品，如果之前未配置佣金规则，则默认按照链动等级发放佣金，是否继续？', {title: '提示'}, function (index) {
			if (repeat_flag) return;
			repeat_flag = true;
			layer.close(index);

			$.ajax({
				url: ns.url("lian://shop/goods/setGoodsIsLian"),
				data: {goods_ids: goods_ids.toString(), is_lian: 1},
				dataType: 'JSON',
				type: 'POST',
				success: function (res) {
					layer.msg(res.message);
					repeat_flag = false;
					if (res.code == 0) {
						table.reload();
					}
				}
			});
		});
	}

	function cancelLian(goods_ids) {
		layer.confirm('是否设置商品不参与链动?', {title: '提示'}, function (index) {
			if (repeat_flag) return;
			repeat_flag = true;
			layer.close(index);

			$.ajax({
				url: ns.url("lian://shop/goods/setGoodsIsLian"),
				data: {goods_ids: goods_ids.toString()},
				dataType: 'JSON',
				type: 'POST',
				success: function (res) {
					layer.msg(res.message);
					repeat_flag = false;
					if (res.code == 0) {
						table.reload();
					}
				}
			});
		});
	}
</script>
